import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux';
//ui
import { Button, Modal, Input, Card } from 'antd';
import styles from './style.module.scss'
//comp
import WordUserRelationTypeSelect from '../WordUserRelationTypeSelect';
//state
import { WordUserRelationState, WordUserRelationGroupIndexDto } from './reducer';
import { WordUserRelationTypeSelectState } from '../WordUserRelationTypeSelect/reducer';
import { MainInfoState } from '../MainInfo/reducer';
//action
import * as Action from './reducer'
import * as WordUserRelationTypeAction from '../WordUserRelationTypeSelect/reducer'
import * as MainInfoAction from '../MainInfo/reducer'
import WordRelationIndex from './components';

export interface WordUserRelationProps {
    state: WordUserRelationState
    mainInfoState: MainInfoState
    wordUserRelationTypeState: WordUserRelationTypeSelectState,
    fetch: typeof Action.fetch
    init: typeof Action.init
    add: typeof Action.add
    edit: typeof Action.edit
    remove: typeof Action.remove
    removeGroup: typeof Action.removeGroup
    setId: typeof WordUserRelationTypeAction.setId
    setValue: typeof WordUserRelationTypeAction.setValue
    setMainWord: typeof MainInfoAction.setWord
}

export const _WordUserRelation: React.SFC<WordUserRelationProps> = (props) => {
    const {
        state, mainInfoState, wordUserRelationTypeState,
        init, fetch, add, edit, remove, removeGroup, setId, setValue, setMainWord
    } = props;
    const [addModalVisible, setAddModalVisible] = useState(false);
    const [editModalVisible, setEditModalVisible] = useState(false);
    const [currentGroupId, setCurrentGroupId] = useState(-1);
    const [currentRelationId, setCurrentRelationId] = useState(-1);
    const [wordAdd, setWordAdd] = useState('')
    const [wordEdit, setWordEdit] = useState('')

    useEffect(() => {
        if (mainInfoState.word)
            fetch(mainInfoState.word)
    }, [fetch, mainInfoState.word])



    const getGroup = (groupDto: WordUserRelationGroupIndexDto, groupIndex: number) => {
        const render = (e: Action.WordUserRelationIndexDto) => {

            const btnEdit = () => {
                setCurrentGroupId(groupDto.id)
                setCurrentRelationId(e.id)
                setWordEdit(e.word)
                setId(e.typeId)
                setValue(e.typeValue)
                setEditModalVisible(true)
            }

            const btnRemove = async () => {
                //自动删除组
                if (state.dto.groupDtos[groupIndex].relationDtos.length === 1) {
                    //此处有用
                    await remove(groupDto.id, e.id)
                    removeGroup(groupDto.id)
                }
                else {
                    remove(groupDto.id, e.id)
                }
            }

            const wordClick = (word: string) => setMainWord(word)

            return (
                <WordRelationIndex
                    word={e.word}
                    value={e.typeValue}
                    onEdit={btnEdit}
                    onRemove={btnRemove}
                    onWordClick={wordClick}
                    style={{ margin: '0.5em' }}
                />
            )
        }
        return (
            <Card size='small'>
                <div className={styles.warpper}>
                    {groupDto.relationDtos.map(render)}
                    <Button className={styles.flexItem} onClick={() => {
                        setCurrentGroupId(groupDto.id);
                        setAddModalVisible(true)
                    }}>加词</Button>
                </div>
            </Card>
        )
    }

    return (
        <div>
            {state.dto.groupDtos.map((e, index) => getGroup(e, index))}
            <Card size='small'>
                <Button className={styles.addGroupBtn} onClick={() => {
                    if (mainInfoState.word)
                        init(mainInfoState.word)
                }}>添加时态组</Button>
            </Card>
            <Modal
                title='添加时态'
                visible={addModalVisible}
                onOk={() => {
                    add(currentGroupId, wordAdd, wordUserRelationTypeState.currentTypeId, wordUserRelationTypeState.currentTypeValue)
                    setAddModalVisible(false);
                }}
                onCancel={() => setAddModalVisible(false)}
            >
                <WordUserRelationTypeSelect />
                <Input value={wordAdd} onChange={(e) => setWordAdd(e.target.value)} />
            </Modal>

            <Modal
                title='修改时态'
                visible={editModalVisible}
                onOk={() => {
                    edit(currentGroupId, currentRelationId, wordEdit, wordUserRelationTypeState.currentTypeId, wordUserRelationTypeState.currentTypeValue)
                    setEditModalVisible(false);
                }}
                onCancel={() => setEditModalVisible(false)}
            >
                <WordUserRelationTypeSelect />
                <Input value={wordEdit} onChange={(e) => setWordEdit(e.target.value)} />
            </Modal>
        </div >
    );
}
const mapStateToProps = (state: RootState) => ({
    state: state.WordUserRelationState,
    mainInfoState: state.MainInfoState,
    wordUserRelationTypeState: state.WordUserRelationTypeState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        setId: WordUserRelationTypeAction.setId,
        setValue: WordUserRelationTypeAction.setValue,
        fetch: Action.fetch,
        init: Action.init,
        add: Action.add,
        edit: Action.edit,
        remove: Action.remove,
        removeGroup: Action.removeGroup,
        setMainWord: MainInfoAction.setWord,
    }, dispatch);

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordUserRelation = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordUserRelation)

export default WordUserRelation